<template>
    <div class="storeInfo">
        <div class="head">
            <el-form :model="form" class="headForm">
                
                <el-form-item label="" style="width:105px">
                <el-select v-model="form.cate_id" placeholder="商品分类">
                    <el-option label="商品分类" value=""></el-option>
                    <el-option :label="item.cate_name" v-for="(item,i) in caLists" :key="i" :value="item.category_id "></el-option>
                </el-select>
                </el-form-item>


                <el-form-item label="" style="width:105px">
                <el-input v-model="form.product_name" placeholder="商品名称"></el-input>
                </el-form-item>

               <el-form-item label="" style="width:105px">
                <el-select v-model="form.is_on_shelf" placeholder="状态">
                    <el-option label="状态" value=""></el-option>
                    <el-option label="已上架" value="1"></el-option>
                    <el-option label="已下架" value="0"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-select v-model="form.item_kind" placeholder="适用场景">
                    <el-option label="适用场景" value=""></el-option>
                    <el-option label="通用" value="0"></el-option>
                    <el-option label="KTV包房" value="1"></el-option>
                    <el-option label="卡座酒吧" value="2"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:180px">
                <el-select v-model="form.is_process" placeholder="是否需要关联原料">
                    <el-option label="是否需要关联原料" value=""></el-option>
                    <el-option label="否" value="0"></el-option>
                    <el-option label="是" value="1"></el-option>
                </el-select>
                </el-form-item>


                
 
                
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="danger" @click="add">添加</el-button>


            </el-form>
            
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="item_id" label="序号" fixed></el-table-column>
                <el-table-column prop="product_name" label="商品名称"></el-table-column>
                <el-table-column prop="cate_name" label="所属分类" width="200"></el-table-column>
                <el-table-column prop="product_image" label="商品图">
                    <template   slot-scope="scope">            
                        <img :src="scope.row.product_image+'?x-oss-process=image/resize,m_fill,w_60,h_50/quality,q_50'"  min-width="60" height="50" :onerror="defunltImg"/>
                    </template>   
                </el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="open_deposit_day" label="存天数">
                    <template   slot-scope="scope"> 
                        <p>{{scope.row.open_deposit_day}} / {{scope.row.deposit_day}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="single_cn" label="单独售卖" width="200"> </el-table-column>
                <el-table-column label="排序" prop="sort"></el-table-column>
                <el-table-column prop="provider_name" label="供应商" width="200"> </el-table-column>
                <el-table-column prop="is_on_shelf_cn" label="状态" width="200"></el-table-column>
                <el-table-column prop="is_process" label="原料" width="200">
                    <template   slot-scope="scope"> 
                        <div v-if="scope.row.is_process == 0">--</div>
                        <div v-else>
                            <p v-if="scope.row.relevance == 1">查看</p>
                            <p v-else>添加</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="combo_name" label="操作" width="200">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row.item_id,scope.row.is_on_shelf)">
                            <i v-if="item.url == 'shelf' && scope.row.is_on_shelf == 1">下架</i>
                            <i v-else-if="item.url == 'shelf' && scope.row.is_on_shelf != 1">上架</i>
                            <i v-else>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>
                </el-table-column>
                

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
       
       <!-- 添加 -->
       <el-dialog title="添加商品" :visible.sync="addShow" class="business" style="padding:0 10px">
            <goodsListBox :input_url="input_url" v-on:getsearchItemGood="getsearchItemGoodF"></goodsListBox>
            <el-table
                ref="multipleTable"
                :data="itemGoodsList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column  type="selection" width="55"  property="product_id"></el-table-column>
                <el-table-column property="name" label="商品图片" width="200">
                    <template slot-scope="scope">            
                        <img :src="scope.row.product_image+'?x-oss-process=image/resize,m_fill,w_60,h_50/quality,q_50'"  min-width="60" height="50" :onerror="defunltImg"/>
                    </template>  
                </el-table-column>
                <el-table-column property="product_name" label="商品名称"></el-table-column>
                <el-table-column property="sale_price" label="售价"></el-table-column>
                <el-table-column property="address" label="规格">
                    <template   slot-scope="scope">            
                        <p v-if="scope.row.spec != ''">{{scope.row.spec}}</p>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addShow = false">取 消</el-button>
                <el-button type="primary" @click="relativeGood">确 定</el-button>
            </div>
        </el-dialog>







        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="editShow">
            <el-form :model="editForm">
                <el-form-item label="适用场景" :label-width="editW">
                    <el-radio v-model="editForm.item_kind" label="1">KTV包房</el-radio>
                    <el-radio v-model="editForm.item_kind" label="2">卡座酒吧</el-radio>
                    <el-radio v-model="editForm.item_kind" label="0">通用</el-radio>
                </el-form-item>
                <el-form-item label="售卖价格"  :label-width="editW">
                    <el-input v-model="editForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="预警库存" :label-width="editW">
                    <el-input v-model="editForm.alarm_num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序值" :label-width="editW">
                    <el-input v-model="editForm.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="未开封储存天数" :label-width="editW">
                    <el-input v-model="editForm.deposit_day" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="已开封储存天数" :label-width="editW">
                    <el-input v-model="editForm.open_deposit_day" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否是佣金商品" :label-width="editW">
                    <el-input v-model="editForm.is_commission" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="销售佣金" :label-width="editW">
                    <el-input v-model="editForm.commission" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否单独售卖" :label-width="editW">
                    <el-input v-model="editForm.is_single" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="回收奖励" :label-width="editW">
                    <el-input v-model="editForm.recover_price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否允许打赏" :label-width="editW">
                    <el-input v-model="editForm.is_reward" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="采购价" :label-width="editW">
                    <el-input v-model="editForm.provide_price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="供应商" :label-width="editW">
                    <el-select v-model="editForm.provider_id" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="平台" :label-width="editW">
                    <el-input v-model="editForm.platform" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="赠送优惠券" :label-width="editW">
                    <el-input v-model="editForm.coupon_batch_id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="优惠券数量" :label-width="editW">
                    <el-input v-model="editForm.coupon_num" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editShow = false">取 消</el-button>
                <el-button type="primary" @click="editYes">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
import goodsListBox from '../../pop/goodslist.vue';
// var url= potUrl.rpriceList;
var searchG_url = potUrl.itemSnshelve
export default {
    components:{
        goodsListBox:goodsListBox,
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:'1',
            form:{
                size:'20',
                page:'1'
            },//搜索内容的参数
            ticketF:{
                day:0,
                week:0
            },
            editShow:false,//编辑弹框的显示开关
            addShow:false,//添加弹框的显示开关
            pageNum:1,//page
            limitList:[],//权限的存储数组
            defunltImg:'this.src="'+require('../../img/error.png')+'"',//图片链接有误时显示的图片
            caLists:[],//
            itemGoodsList:[],
            input_url:searchG_url,
            editW:'120px',
            multipleSelection:[],//放选中的商品
            editForm:{
                item_kind:'',//适用场景
                price:'',//售卖价格
                alarm_num:'',//预警库存
                sort:'',//排序值
                deposit_day:'',//未开封储存天数
                open_deposit_day:'',//已开封储存天数
                is_commission:'',//是否是佣金商品
                commission:'',//销售佣金
                is_single:'',//是否允许单独售卖
                recover_price:'',//回收奖励
                is_reward:'',//是否允许打赏
                provide_price:'',//采购价
                provider_id:'',//供应商
                platform:'',//平台
                coupon_batch_id:'',//赠送优惠券
                coupon_num:'',//优惠券数量
            }//编辑弹框内需要的数据
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.itemList,that.form,function(res){
            that.total = parseInt(res.data.total)
            that.tableData =  res.data.list;
            that.groupon_price = res.data.groupon_price
        });//列表 
        abc.get(that,potUrl.categoryList,{'cate_type': 1},function(caList) {
            that.caLists = caList.data
        })  
        var str = $('.router-link-active').attr('href');
        abc.limit(that,str,(arr)=>{
            // var arr = that.limitList;
            // that.limitList = [];
            arr.map((item,l)=>{
                if(item.url != 'add'){
                    that.limitList.push(item)
                }
            })
        })// 权限     
        
    },
    created(){
        var that = this;
         
        // setTimeout(() => {
            
        // }, 500)       
    },
    methods:{           
        search(){
            var that = this;
            abc.get(that,potUrl.itemList,that.form,function(res){
                that.total = parseInt(res.data.total)
                that.tableData =  res.data.list;
                that.groupon_price = res.data.groupon_price
            });//列表 
        }, 
        add(){
            var that = this;
            abc.get(that,potUrl.itemGoods,{page:1},function(res){
                that.itemGoodsList = res.data;
                that.addShow = true;
            })
        },  
        getsearchItemGoodF(data){
            this.itemGoodsList = [];
            this.itemGoodsList.push(data)
        }, 
        handleSelectionChange(val){
            var that = this;
            this.multipleSelection = val;
        },
        relativeGood(){
            var that = this;
            var arr = [];
            $.each(that.multipleSelection,function(i,item){
                arr.push(item.product_id)
            })
            abc.post(that,potUrl.itemShelve,{product_ids:arr},function(res) {
                that.$notify.info({
                    title: '提示',
                    message: res.message
                });
                that.addShow = false;
                abc.get(that,potUrl.itemList,that.form,function(res){
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data.list;
                    that.groupon_price = res.data.groupon_price
                });//列表
            })
        },
        editYes(){
            let that = this;
            abc.post(that,potUrl.itemPost,that.editForm,function(res){
                that.$notify.info({
                    title: '提示',
                    message: res.message
                });
                that.editShow = false;
                abc.get(that,potUrl.itemList,that.form,function(res){
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data.list;
                    that.groupon_price = res.data.groupon_price
                });//列表
            })
        },
        theClick(a,b,c){
            let that = this;
            if(a == 'edit'){               
                abc.get(that,potUrl.itemInfo,{item_id:b},function(res){
                    that.editForm = res.data;
                    console.log(that.editForm)
                    that.editShow =true;
                })
            }else if(a == 'shelf' || a == 'del'){
                var obj = {},urls='',txt='';
                if(a == 'shelf'){
                    urls = 'operate/item/post';
                    obj.item_id = b;                    
                    if(c == 1){
                        txt = '是否要下架此商品？'
                        obj.is_on_shelf = 0;
                    }else{
                        txt = '是否要上架此商品？'
                        obj.is_on_shelf = 1;
                    }
                    
                }else{
                    urls = 'operate/item/del';
                    obj.item_id = b;
                    txt = '确定要删除此商品？'
                }
                abc.twoTips(that,urls,txt,obj,function() {
                    that.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    abc.getList(that,potUrl.itemList,that.form);
                })
            }
            
            console.log(a,b,c)
        },
        changePage(val){
            var that = this;
            // this.form.pageNum = val;
            this.pageNum = val;
            that.form.page = that.pageNum;
           abc.getList(that,potUrl.itemList,that.form);
        }
    }
}

</script>